<template>
	<view :style="$store.state.bgColor=='black'?'background: #1A1C24;':'background:#F7F8FA;height: 100%'">

		<view v-if="$store.state.bgColor=='black'" style="height: 2px; background: #1A1C24;"></view>
		<view
			:style="$store.state.bgColor=='black'?'width: 85%; background: #22252F; color: #fff;  margin: 0 auto; margin-top:10px;   padding: 15px;':'width: 85%; background: #fff;  margin: 0 auto; margin-top: 10px; padding: 15px;'"
			v-for="(orderItem, index2) in indexList" :key="index2">
			<view style="display:flex; width: 100%; font-size: 12px; font-weight: bold;">
				<view style="display: flex; flex-direction:column; justify-content: center;    ">
					<text style="color:#AFAFAF;font-size: 14px;">{{$t('other.tianshu')}}</text>

					<text style="margin-top: 5px;">{{orderItem.days}}</text>
				</view>
				<view
					style="display: flex; flex-direction:column; justify-content: center; align-items: center; flex: 1;">
					<text style="color:#AFAFAF;font-weight: bold;font-size: 14px;">{{$t('other.jkje')}}</text>
					<!-- <text style="margin-top: 5px;" v-if="orderItem.status==2">{{orderItem.amount}}</text> -->
					<text style="margin-top: 5px;">{{orderItem.number?orderItem.number:0}}</text>
				</view>
				<view style="display: flex; flex-direction:column; justify-content: center; align-items: center; ">
					<text style="color:#AFAFAF;font-weight: bold;font-size: 14px;">{{$t('other.dbruid')}}</text>
					<text style="margin-top: 5px;">{{orderItem.guarantor_uid}}</text>
				</view>
			</view>
			<view style="display:flex; width: 100%; font-size: 12px; font-weight: bold;" v-if="orderItem.status==1">
				<view style="display: flex; flex-direction:column; justify-content: center;    ">
					<text style="color:#AFAFAF;font-size: 14px;">{{$t('other.hkzt')}}</text>
			
					<text style="margin-top: 5px;">{{$t('other.'+orderItem.status_name3)}}</text>
				</view>
				<view
					style="display: flex; flex-direction:column; justify-content: center; align-items: center; flex: 1;">
					<text style="color:#AFAFAF;font-weight: bold;font-size: 14px;">{{$t('other.hkje')}}</text>
					<!-- <text style="margin-top: 5px;" v-if="orderItem.status==2">{{orderItem.amount}}</text> -->
					<text style="margin-top: 5px;">{{orderItem.hk_number?orderItem.hk_number:0}}</text>
				</view>
				<view style="display: flex; flex-direction:column; justify-content: center; align-items: center; ">
					<text style="color:#AFAFAF;font-weight: bold;font-size: 14px;">{{$t('other.hksj')}}</text>
					<text style="margin-top: 5px;">{{orderItem.hk_time}}</text>
				</view>
			</view>
			<view
				style="display:flex; width: 100%; padding-top: 18px; font-size: 14px; font-weight: bold; color: #AFAFAF; ">
				<view style="display: flex; flex: 1; flex-direction:column;  ">
					<text>{{i18n.status}}</text>
					<text
						:style="$store.state.bgColor=='black'?'color: #fff;margin-top: 5px;':'color: #222222;margin-top: 5px;'">{{$t('other.'+orderItem.status_name1)}}</text>
				</view>

				<view style="display: flex; flex: 1; flex-direction:column;    text-align: right;  ">
					<text>{{i18n.time}}</text>
					<text
						:style="$store.state.bgColor=='black'?'color: #fff;margin-top: 5px;':'color: #222222;margin-top: 5px;'">{{orderItem.created_at}}</text>
				</view>
			</view>
		</view>
		<view style="height: 10px;"></view>
		<view
			:style="$store.state.bgColor=='black'?'width: 100%; height: 35px; display: flex; justify-content: center; padding-top: 10px; color: #fff;':'width: 100%; height: 35px; display: flex; justify-content: center; padding-top: 10px;'">
			<text>{{loding}}</text>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				indexList: [],
				pages: 1,
				status: false,
				loding: "",
				scrollH: 0
			}
		},
		onLoad() {
			console.log('触发我了吗')
			this.getData()
			const _this = this
			uni.setNavigationBarTitle({
				title: _this.$t("other.jiedaiRecord")
			})
			if (this.$store.state.bgColor == 'black') {
				uni.setNavigationBarColor({
					frontColor: '#ffffff', // 导航栏标题颜色，只能是'black'或'white'
					backgroundColor: '#22252F'
				});
			}
			
			// this.$nextTick(() => {
			
			// 	let systemInfo = uni.getSystemInfoSync();
			// 	this.scrollH = systemInfo.windowHeight - 100
			
			// 	document.querySelectorAll('.uni-page-head .uni-page-head-ft .uni-page-head-btn')[0].querySelector(
			// 		'.uni-btn-icon').innerText = this.$t("ohter.jiedaiRecord");
			// })

		},
		onReachBottom() {
			this.scrolltolower()
		},
		computed: {
			i18n() {
				return this.$t("deposit")
			}
		},
		methods: {
			scrolltolower() {

				if (this.status) return false
				this.pages += 1
				this.loding = "..........."
				this.getData()
			},
			getData() {
				this.status = true

				uni.showLoading({
					title:'loding'
				})
				var arr = []
				const res = this.$H.post('/api/v1/jiedaiRecord', false, {
					page: this.pages
				}).then(res => {
					console.log('没有到这里吗')
					uni.hideLoading()
					// this.loading=false
					if (res.type == "ok") {




						var arr = []
						if (res.data.data.length <= 0) {
							this.status = false
							this.loding = ""
							this.pages -= 1
							return
						}


						res.data.data.map(item => {



							let date = new Date(Date.parse(new Date(item.created_at)))
							item.created_at = this.$u.test.formatDate(date, 'yyyy-MM-dd hh:mm')


							arr.push(item)



						})

						if (this.indexList.length > 0) {
							this.indexList = [...this.indexList, ...arr]

						} else {
							this.indexList = arr
						}
							console.log(this.indexList,'数据处理---')
						this.status = false


							


					} else {

					}
					
				
				})


			}




		}
	}
</script>

<style>
	page {
		/* background-color: #F7F8FA; */
		position: initial;
		overflow: initial;
	}
</style>